import {Image, StyleSheet, View, Text, TouchableOpacity, Modal, FlatList} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import increateicon from "@/assets/images/releaseImg/increateIcon.png"
import addCardIcon from "@/assets/images/releaseImg/addCardIcon.png"
import closeIcon from "@/assets/images/releaseImg/closeIcon.png"
import {useDispatch, useSelector} from "react-redux";
import { setRegisterGroupData } from "@/store/slices/registerGroupSlice"
import {RootState} from "@/store";

export default function settingScreen() {
    const tagList = [
        {
            key: 0,
            title: "标签",
            select: false,
        },
        {
            key: 1,
            title: "我的能力",
            select: false,
        },
        {
            key: 2,
            title: "常住地",
            select: false,
        },
        {
            key: 3,
            title: "我的资源",
            select: false,
        },
        {
            key: 4,
            title: "我需要什么",
            select: false,
        },
        {
            key: 5,
            title: "我关注什么",
            select: false,
        },
        {
            key: 6,
            title: "微信、联系方式",
            select: false,
        }
    ];
    const router = useRouter();
    const [list, setList] = useState(tagList);
    const [modalVisiable, setModalVisiable] = useState(false)
    const [selectList, setSelectList] = useState([]);

    const dispatch = useDispatch();
    const registerGroup  = useSelector((state: RootState) => state.registerGroup);


    useEffect(() => {
        console.log('registerGroup', registerGroup.registerGroupData)
        setList(registerGroup?.registerGroupData.cardTitleTemplateList || tagList);
        setSelectList(registerGroup?.registerGroupData.cardTitleTemplate || []);
    }, []);

    const onSelectTag = function (key) {
        const tmp = [...selectList];
        const tmpList = [];
        list.forEach((item: any, index: number) => {
            if (item.key == key) {
                tmp.push(item)
            } else {
                tmpList.push(item);
            };
        })
        setList(tmpList);
        setSelectList(tmp);
        setModalVisiable(true)
    };

    const removeTag = function (key) {
        const tmp = [];
        const tmpList = [...list];
        selectList.forEach((item: any, index: number) => {
            if (item.key == key) {
                tmpList.push(item)
            } else {
                tmp.push(item);
            };
        })
        setList(tmpList);
        setSelectList(tmp);
    };

    const save = function () {
        dispatch(setRegisterGroupData({ cardTitleTemplate: selectList, cardTitleTemplateList: list }))
        router.back();
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#fff" }}>
            <Stack.Screen
                options={{
                    title: '群名片模板', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => {
                            dispatch(setRegisterGroupData({ cardTitleTemplate: selectList, cardTitleTemplateList: list }))
                            router.back()
                        }}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.cardContainer}>
                <View style={styles.cardHeaderItem}>
                    <View>
                        <Text>基本介绍</Text>
                    </View>
                    <Text style={{ color: "#9E9E9E" }}>必填</Text>
                </View>
                {
                    selectList?.map((item: any, index: number) => {
                        return (
                            <View style={styles.cardList} key={index}>
                                <TouchableOpacity onPress={() => removeTag(item.key)}>
                                    <View style={styles.cardListIcon}>
                                        <Image source={increateicon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                </TouchableOpacity>
                                <Text>{ item.title }</Text>
                            </View>
                        )
                    })
                }
                <TouchableOpacity onPress={() => setModalVisiable(true)}>
                    <View style={styles.addBtnWrap}>
                        <View style={styles.addBtnIcon}>
                            <Image source={addCardIcon} style={{ width: "100%", height: "100%" }} />
                        </View>
                        <Text style={styles.addBtnText}>添加表单项</Text>
                    </View>
                </TouchableOpacity>
            </View>
            <Modal
                animationType="fade"
                transparent={true}
                visible={modalVisiable}
            >
                <TouchableOpacity onPress={() => setModalVisiable(false)}>
                    <View style={styles.modalContainer}>
                    </View>
                </TouchableOpacity>
                <View style={styles.modalWrap}>
                    <View style={styles.headerWrap}>
                        <View style={styles.headerTitle}>
                            <Text style={styles.headerTitleText}>常用报名项，请点击添加</Text>
                        </View>
                        <TouchableOpacity onPress={() => setModalVisiable(false)}>
                            <View style={styles.closeIcon}>
                                <Image source={closeIcon} style={{ width: "100%", height: "100%" }} />
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.tagList}>
                        {/*<FlatList*/}
                        {/*    data={list}*/}
                        {/*    keyExtractor={(item) => item.key}*/}
                        {/*    renderItem={({ item }) => {*/}
                        {/*        if (!item.select) {*/}
                        {/*            return (*/}
                        {/*                <TouchableOpacity onPress={() => onSelectTag(item.key)}>*/}
                        {/*                    <View style={styles.tagItem}>*/}
                        {/*                        <Text style={styles.tagItemText}>{ item.title }</Text>*/}
                        {/*                    </View>*/}
                        {/*                </TouchableOpacity>*/}
                        {/*            )*/}
                        {/*        };*/}
                        {/*    }}*/}
                        {/*/>*/}


                        {
                            list?.map((item: any, index: number) => {
                                return (
                                    <TouchableOpacity key={index} onPress={() => onSelectTag(item.key)}>
                                        <View style={styles.tagItem}>
                                            <Text style={styles.tagItemText}>{ item.title }</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            })
                        }
                    </View>
                </View>
            </Modal>
            <TouchableOpacity onPress={save}>
                <View style={styles.save}>
                    <Text style={styles.saveText}>保存</Text>
                </View>
            </TouchableOpacity>
        </View>

    );
}

const styles = StyleSheet.create({
    cardContainer: {
        flex: 1,
        backgroundColor: "#fff",
        padding: 12,
    },
    cardHeaderItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        borderBottomColor: "#E4E6EC",
        borderBottomWidth: 0.3,
        paddingBottom: 17,
    },
    cardList: {
        flexDirection: "row",
        alignItems: 'center',
        paddingVertical: 17,

        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
    },
    cardListIcon: {
        width: 14,
        height: 14,
        marginRight: 10,
    },
    addBtnWrap: {
        flexDirection: "row",
        alignItems: 'center',
        justifyContent: "center",
        marginTop: 40,
    },
    addBtnIcon: {
        width: 14,
        height: 14,
        marginRight: 5,
    },
    addBtnText: {
        color: "#EC6138"
    },
    save: {
        width: scaleSize(351),
        height: 38,
        backgroundColor: "#EC6138",
        borderRadius: 19,
        margin: "auto",
        marginBottom: 23,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    saveText: {
        color: "#fff",
    },
    modalContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
        position: "relative",
    },
    modalWrap: {
        backgroundColor: "#fff",
        position: "absolute",
        bottom: 0,
        width: "100%",
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        paddingBottom: 80,
        paddingHorizontal: 12,
    },
    headerWrap: {
        paddingTop: 14,
        flexDirection: 'row',
        alignItems: "center",
    },
    closeIcon: {
        width: 13,
        height: 13,
    },
    headerTitle: {
        flex: 1,
    },
    headerTitleText: {
        fontSize: 16,
        color: "#2A2B30",
    },
    tagList: {
        flexDirection: "row",
        flexWrap: "wrap",
        marginTop: 12,
    },
    tagItem: {
        paddingVertical: 9,
        paddingHorizontal: 14,
        borderRadius: 17,
        backgroundColor: "#F7F8F9",
        marginRight: 12,
        marginBottom: 12,
    },
    tagItemText: {
        fontSize: 14,
        fontWeight: 400,
    },
});
